<template>
  <ul class="sorter">
    <li v-for="(item,index) in list" :key="item.key" :class="{'active':item.key === current}" @click="selectSorter(item.key,index)">
      {{item.name}}
      <i class="icon icon-arrow-down1" v-if="item.type == 2 && item.status===0"></i>
      <i class="icon icon-arrow-up1" v-if="item.type == 2 && item.status===1"></i>
    </li>
  </ul>
</template>

<script>
  import loading from '@/components/loading/loading';
  export default {
    name: '',
    data() {
      return {
        current: 'all',
        list: [
          {key:'all', name: '综合', type:1, status:0},
          {key:'hot', name: '人气', type:1, status:0},
          {key:'new', name: '最新', type:1, status:0},
          {key:'Sales', name: '销量', type:1, status:0},
          {key:'Price', name: '价格', type:2, status:0}
        ]
      }
    },
    methods: {
      selectSorter(key,index) {
        this.current = key;
        let curList = this.list[index];
        if(curList.type===2) {
          curList.status ++;
          curList.status  %= 2;
        }
        this.$emit('selectSorter',{key:key,status:curList.status})
      }
    },
    components: {
      loading
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .sorter{
    display: flex;
    height: 40px;
    background-color: @color-background-l;
    li{
      line-height: 40px;
      text-align: center;
      flex: 1;
      font-size: @font-size-medium;
      font-weight: bold;
      .icon{
        font-size: @font-size-small;
      }
      &.active{
        color: @color-text-d;
      }
    }
  }
</style>
